<template>
  <div class="dashboard_main">
   
    <con-title :topTitle="topTitle"/>
    <over-view :show='[true,true,true]'></over-view>

    <!-- 图标区域 -->
    <div class="chars_con">
      <div>
        <el-card class="box-card max">
          <div slot="header" class="clearfix">
            <span>空气湿度</span>
          </div>
          <div class="text item">
            <div ref="shidu" class="charts"></div>
          </div>
        </el-card>
      </div>

      <div>
        <el-card class="box-card max">
          <div slot="header" class="clearfix">
            <span>光照</span>
          </div>
          <div class="text item">
            <div ref="light" class="charts"></div>
          </div>
        </el-card>
      </div>

      <div>
        <el-card class="box-card max">
          <div slot="header" class="clearfix">
            <span>气压</span>
          </div>
          <div class="text item">
            <div ref="qiya" class="charts qiya"></div>
          </div>
        </el-card>
      </div>

      <div>
        <el-card class="box-card max">
          <div slot="header" class="clearfix">
            <span>土壤湿度</span>
          </div>
          <div class="text item">
            <div ref="tu_shidu" class="charts tu_shidu"></div>
          </div>
        </el-card>
      </div>
    </div>

  
  </div>
</template>

<script>
//2. 调用后台接口
import {$sensorCount } from "@/api/api.js";
import OverView from '@/components/home/OverView.vue';
import ConTitle from '@/components/ConTitle.vue';

export default {
  components: {
    OverView,ConTitle
  },
  name: "dashboard",
  //注意：性能优化，data里面的数据越少越好，data操作的次数越少越好
  data() {
    return {
     topTitle:{
       type:"",
       text:"仪表盘",
       msg:"设备概览和传感数据可视化"
     }
    };
  },
  mounted() {
    this.getSensor();
  },
  methods: {
    //获取图表数据
    getSensor() {
      $sensorCount().then((res) => {
        console.log(res);
        let { air, beam, pressure, soil } = res.data.data;
        this.draw(air, beam, pressure, soil);
      });
    },

    //画图表
    draw(air, beam, pressure, soil) {
      //初始化
      let myChart = this.$echarts.init(this.$refs.shidu);
      let light = this.$echarts.init(this.$refs.light);
      let qiya = this.$echarts.init(this.$refs.qiya);
      let tu_shidu = this.$echarts.init(this.$refs.tu_shidu);
      //设置options
      myChart.setOption({
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: air,
            type: "line",
            smooth: true,
          },
        ],
      });

      light.setOption({
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: beam,
            type: "bar",
          },
        ],
      });

      qiya.setOption({
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [30, 100],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: pressure,
          },
        ],
      });

      tu_shidu.setOption({
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: soil,
            type: "line",
            smooth: true,
          },
        ],
      });
    },
  },
};
</script>

<style scoped lang="scss">
.dashboard_main::-webkit-scrollbar {
  display: none;
}

.dashboard_main {
  width: 100%;
  height: 100%;
  font-size: 15px;
  overflow-y: scroll;

  .chars_con {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    > div {
      width: 50%;
      min-height: 350px;
      box-sizing: border-box;
      position: relative;
      padding-bottom: 10px;

      .charts {
        width: 100%;
        height: 300px;
      }

      .qiya,.tu_shidu{
        height: 400px;
      }
    }

    > div:nth-of-type(odd) {
      padding-right: 5px;
    }

    > div:nth-of-type(even) {
      padding-left: 5px;
    }
  }
}
</style>